<template>
  <div id="MainPage">
      <div class="p-layout" id="p-layout">
        <!-- 头部导航 -->
        <v-header></v-header>
        <!-- 左菜单导航 -->
        <!-- <slot></slot> -->
        <!-- 右边页面 -->
        <div class="p-page-content">
          <router-view></router-view>
        </div>
      </div>
  </div>
</template>
<script>
import Header from '../components/layout/Header.vue';

export default {
  name: 'app',
  components:{
    'v-header':Header
  }
}
</script>

<style>
  #MainPage {
    width:100%;
    height:100%;
  }

  .p-page-content {
    /* padding: 15px; */
    padding: 0px;
    position: absolute;
    top: 60px;
    height: calc(100% - 60px);
    overflow: auto;
  }

  .p-layout .p-page-content {
    /* margin-left: 180px; */
    /* width: calc(100% - 180px); */
     width: 100%;
  }
  .p-layout .p-navside {
    width: 180px;
  }

  #tab-first,#tab-second{
    width:130.9px;
  }
  
</style>